<template>
  <div>
    <el-col style="width: 30%;">
     <el-container style="height: 100%;background: #101e44;box-shadow: 0 2px 4px rgba(21, 23, 238, 0.42), 0 0 6px rgb(81, 204, 255);">
       <el-col>
       <el-row style="width: 100%; height: 50%">
         <temperature></temperature>
       </el-row>
       <el-row style="width: 100%; height: 50%">
         <strain></strain>
       </el-row>
         </el-col>
     </el-container>
    </el-col>
    <el-col style="width: 40%;background: #101e44">
    <el-container style="height: 550px;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255); background: #101e44">
      <el-header style="align:center;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background: #101e44">
        <div style="height: 75%;margin-top: 12px;background: #101e44">
          <span class="table_title">
            运行参数数据
          </span>
        </div>
      </el-header>
      <el-main style="background: #101E44;height:400px">
        <barchart></barchart>
      </el-main>
    </el-container>
      <el-container style="height: 600px;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);background: #101e44">
<!--       4个大参数加表格数据。 环境温度，流量，压力，转速。低下表格为A点电压，电流，B点电压电流。等-->
      <el-header style="width: 100%;height: 26%;box-shadow: 0 2px 4px rgba(21, 23, 238, 0.42), 0 0 6px rgb(81, 204, 255);">
        <div style="width:100%;height:50%;margin-top: 5%;border-left: none;">
          <el-col style="height:100%;width:25%;border: 5px solid #262781;border-left: none;border-top: none;border-bottom: none;">
            <el-row class="bigdataspan" ><span :key="value1">{{value1}}</span></el-row>
            <el-row class="bigdataspan2">环境温度(℃)</el-row>
          </el-col>
          <el-col style="height:100%;width:25%;border: 5px solid #262781;border-left: none;border-top: none;border-bottom: none;">
            <el-row class="bigdataspan">{{value2}}</el-row>
            <el-row class="bigdataspan2">流量(m³/s)</el-row>
          </el-col>
          <el-col style="height:100%;width:25%;border: 5px solid #262781;border-left: none;border-top: none;border-bottom: none;">
            <el-row class="bigdataspan">{{value3}}</el-row>
            <el-row class="bigdataspan2">压力(Pa)</el-row>
          </el-col>
          <el-col style="height:100%;width:25%">
            <el-row class="bigdataspan">{{value4}}</el-row>
            <el-row class="bigdataspan2">转速(r/s)</el-row>
          </el-col>
        </div>
      </el-header>
      <el-main>
        <el-container  style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
          <el-table :data="currTableData" style="width: 100%" :row-style="getRowClass"
                    :header-cell-style="{background:'#101E44',color:'#606266'}" :show-header="false">
            <el-table-column
              prop="point"
              label="数据点名称">
              <template slot-scope="scope">
                <div><p style="font-size: 10px; color: #888888">数据点名称</p></div>
                <span style="font-size: 20px; color: #72C22D; font-weight:bold">{{scope.row.point}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="data"
              label="最新数据">
              <template slot-scope="scope">
                <div><p style="font-size: 10px; color: #888888">最新数据</p></div>
                <span style="font-size: 20px; color: #72C22D; font-weight:bold">{{scope.row.data}}</span>
                <span v-if="scope.row.point=='A相电压'||scope.row.point=='B相电压'" style="font-size: 15px; color: #5E9FFF; font-weight:bold">V</span>
                <span  v-if="scope.row.point=='A相电流'||scope.row.point=='B相电流'"style="font-size: 15px; color: #5E9FFF; font-weight:bold">A</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="时间">
              <template slot-scope="scope">
                <div><p style="font-size: 10px; color: #888888">更新时间</p></div>
                <span style="font-size: 20px; color: #72C22D; font-weight:bold">{{scope.row.time}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-container>
      </el-main>
    </el-container>
   </el-col>
    <el-col style="width: 30%;background: #101e44;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);">
    <el-container style=" height: 550px;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);background: #101e44">
      <div style="width: 100%;height: 100%;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);background: #101e44">
        <div style="width: 100%;height: 50%;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);background: #101e44">
        <el-col style="width: 60%;height: 100%;background: #101e44;float:left;">
          <barchart2></barchart2>
        </el-col>
        <el-col style="width: 40%;height: 100%;background: #101e44">
          <onlinechart></onlinechart>
        </el-col>
      </div>
        <div style="width: 100%;height: 50%;box-shadow: 0 2px 8px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);background: #101e44">
        <el-col style="width: 60%;height: 100%;background: #101e44;float:left">
          <alarmchart></alarmchart>
        </el-col>
        <el-col style="width: 40%;height: 100%;background: #101e44">
          <div style="width: 100%;height: 100%;background: #101e44">
            <div style="height: 50%;display:flex;justify-content:center;background: #101e44">
              <el-container>
                <el-header style="height: 20px">
                  <div style="display:flex;justify-content:center;background: #101e44">
                   <span class="sensorOnline_title">
                    报警总数
                   </span>
                  </div>
                </el-header>
                <el-main style="margin-top: 10%">
                  <div style="display:flex;justify-content:center;background: #101e44">
                    <span class="numberspan">0</span><span class="numberspan">2</span><span class="numberspan">3</span><span class="numberspan">1</span ><span class="numberspan">0</span>
                  </div>
                </el-main>
              </el-container>
            </div>
            <div style="height: 50%;display:flex;justify-content:center;background: #101e44">
              <el-container>
                <el-header style="height: 20px">
                  <div style="display:flex;justify-content:center;background: #101e44">
                   <span class="sensorOnline_title2">
                    今日报警
                   </span>
                  </div>
                </el-header>
                <el-main>
                  <div style="display:flex;justify-content:center;background: #101e44">
                   <span class="numberspan">0</span><span class="numberspan">0</span><span class="numberspan">0</span><span class="numberspan">0</span ><span class="numberspan">3</span>
                  </div>
                </el-main>
              </el-container>
            </div>
           </div>
<!--          <div style="display:flex;justify-content:center;">-->
<!--            -->
<!--           </div>-->
        </el-col>
      </div>
      </div>
    </el-container>
    <el-container style=" height: 600px;box-shadow: 0 2px 6px rgba(21, 23, 238, 0.42), 0 0 10px rgb(81, 204, 255);background: #101e44">
        <el-header style="align:center;margin-top:5%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background: #101e44">
          <div style="height: 75%;margin-top: 12px;background: #101e44">
          <span class="table_title">
            工艺流程进度
          </span>
          </div>
        </el-header>
        <el-main style="background: #101E44;height:400px">
          <progresschart></progresschart>
        </el-main>
      </el-container>
   </el-col>
<!--   <el-col style="width: 20%;background: #101e44">-->
<!--     <el-container style=" height: 500px;border: 1px solid #eee;">-->
<!--       <pressure></pressure>-->
<!--     </el-container>-->
<!--   </el-col>-->

 </div>
</template>

<script>
  import { parseTime } from '@/utils'
  import tem from './lineChart'
  import temperature from './temperature'
  import strain from './strain'
  import pressure from './pressureChart'
  import barchart from './barchart'
  import barchart2 from './barchart2'
  import onlinechart from './onlinechart'
  import alarmchart from './alarmchart'
  import progresschart from './progresschart'
  const userTypes = []
  export default {
    components: {
      temperature,
	  strain,
      barchart,
      barchart2,
      onlinechart,
      alarmchart,
      progresschart
    },
    data() {
      return {
        currTableData: [{
          point: 'A相电压',
          data: 0,
          time: '0000/00/00 00:00:00'
        },
        {
          point: 'B相电压',
          data: 0,
          time: '0000/00/00 00:00:00'
        },
        {
          point: 'A相电流',
          data: 0,
          time: '0000/00/00 00:00:00'
        },
        {
          point: 'B相电流',
          data: 0,
          time: '0000/00/00 00:00:00'
        }],
        currentRow: null,
        value1: 0,
        value2: 0,
        value3: 0,
        value4: 0
      }
    },
    methods: {
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return 'background:#3f5c6d2c;color:#000;'
      }
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    created() {

    },
    mounted() {
      this.$nextTick(() => {
        const _this = this
        setInterval(function() {
          _this.value1 = (Math.random() * 100).toFixed(0) - 0
          _this.value1 = _this.value1 - 100
          _this.value2 = (Math.random() * 30).toFixed(0) - 0
          _this.value2 = _this.value2 + 100
          _this.value3 = (Math.random() * 500).toFixed(0) - 0
          _this.value3 = _this.value3 + 800
          _this.value4 = (Math.random() * 20).toFixed(0) - 0
          _this.value4 = _this.value4 + 20
          _this.currTableData[0].data = (Math.random() * 20).toFixed(0) - 0
          _this.currTableData[0].data = ((_this.currTableData[0].data + 20) * 0.01).toFixed(2)
          _this.currTableData[1].data = (Math.random() * 20).toFixed(0) - 0
          _this.currTableData[1].data = ((_this.currTableData[1].data + 20) * 0.01).toFixed(2)
          _this.currTableData[2].data = (Math.random() * 20).toFixed(0) - 0
          _this.currTableData[2].data = ((_this.currTableData[2].data + 50) * 0.01).toFixed(2)
          _this.currTableData[3].data = (Math.random() * 20).toFixed(0) - 0
          _this.currTableData[3].data = ((_this.currTableData[3].data + 50) * 0.01).toFixed(2)
          console.log(_this.currTableData[0].data)
          var date = new Date()
          _this.currTableData[0].time = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate() + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          _this.currTableData[1].time = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate() + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          _this.currTableData[2].time = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate() + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          _this.currTableData[3].time = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate() + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          _this.$forceUpdate()
        }, 2000)
      })
    },
    beforeDestroy() {
    }
  }
</script>
<style scoped>
  .bigdataspan{
    align:center;
    width: 100%;
    height:70%;
    font-size: 50px;
    color: #fff;
    line-height: 100%;
    text-align:center;
    background-color: #101e44 ;
    border-radius: 2px;
  }
  .bigdataspan2{
    align:center;
    width: 100%;
    height:30%;
    font-size: 15px;
    color: #fff;
    line-height: 100%;
    text-align:center;
    background-color: #101e44 ;
    border-radius: 2px;
  }
  .numberspan{
    margin-right: 10px;
    width: 30px;
    height:40px;
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    text-align:center;
    background-color: #101e44 ;
    /*-webkit-box-shadow:*/
    box-shadow: 0 2px 4px rgba(21, 23, 238, 0.42), 0 0 6px rgb(81, 204, 255);
    border-radius: 2px;
  }
  .table_title {
    height: 40px;
    width:  40px;
    font-family: "微软雅黑";
    font-size: 28px;
    font-weight: 700;
    margin-left: 5px;
    margin-top:  20px;
    align:center;
    color: #eee9ea;
  }
  .sensorOnline_title{
    height: auto;
    width:  auto;
    font-family: "微软雅黑";
    font-size: 15px;
    font-weight: 700;
    align:center;
    color: #eee9ea;
    margin-top: 10%
  }
  .sensorOnline_title2{
    height: 15px;
    width:  auto;
    font-family: "微软雅黑";
    font-size: 15px;
    font-weight: 700;
    align:center;
    color: #eee9ea;
  }
  .demo-table-expand {
    font-size: 20px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .el-table,
  .el-table__expanded-cell {
    background-color: #101E44;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100px;
  }
</style>

